<template>
    <div class="wrap">
        <Header :title="'知识'"/>
        <div class="date">
             <h4>选择日期年月日</h4>
        <input type="text" value="2018-09-03" @click="openPicker" v-model="dateTime" id="datePicker">
        </div>
       
  <!--日期选择器-->
    <mt-datetime-picker
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate="startDate"
      >
    </mt-datetime-picker>

    <!-- 日历插件 -->
    <div id="demo">
      <span>日历插件输入日期</span>
      <input type="text" id="dt" placeholder="2018-9-25" ref="inputVal" v-model="val">
      <div id="dd"></div>
    </div>

    <button @click="onVal">获取input值</button>
         <Tabbar />
    </div>
   
</template>
<script>
//导入公共组件 tabbar.vue
import Tabbar from "../comments/tabbar.vue";
import Header from "../comments/header.vue";
import moment from "moment";

import $ from "jquery";
import "../../lib/jqueryCalendar/calendar.css";
import "../../lib/jqueryCalendar/js/calendar.js";
export default {
  data() {
    return {
      dateTime: "2018-09-03",
      startDate: new Date(),
      val: ""
    };
  },
  //js日历 放到mounted中
  mounted() {
    $("#dd").calendar({
      trigger: "#dt",
      zIndex: 999,
      format: "yyyy-mm-dd",
      onSelected: function(view, date, data) {
        console.log("event: onSelected");
      },
      onClose: function(view, date, data) {
        console.log("event: onClose");
        console.log("view:" + view);
        console.log("date:" + date);
        console.log("data:" + (data || "None"));
      }
    });

    $("#datePicker").focus(function() {
      document.activeElement.blur();
    });
    $("#dt").focus(function() {
      document.activeElement.blur();
    });
  },
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm(data) {
      let date = moment(data).format("YYYY.MM.DD");
      this.dateTime = date;
    },
    onVal() {
      //获取input的值 利用 ref 在vue中获取dom元素的值
      var aa = this.$refs.inputVal.value;
      console.log(aa);
    }
  },
  components: {
    Tabbar: Tabbar,
    Header: Header
  }
};
</script>
<style scoped>
.wrap {
  height: 100%;
}
.date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #9e9e9e70;
}
.date h4 {
  color: #795548;
}
.date input {
  width: 50%;
  margin-bottom: 0;
}
</style>


